<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="成语查询">
        <el-input v-model="word" placeholder="请输入成语"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchWord">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="wordData" v-if="wordData.name">
      <el-form>
      <el-form-item label="">
        {{ wordData.pinyin }}
      </el-form-item>
      <el-form-item label="成语名称">
        {{ wordData.name }}
      </el-form-item>
      <el-form-item
        label="成语含义"
        v-if="wordData.jbsy && wordData.jbsy.length"
      >
        {{ wordData.jbsy[0] }}
      </el-form-item>
      <el-form-item label="近义词" v-if="wordData.jyc && wordData.jyc.length">
        <span v-for="(item, ind) in wordData.jyc" :key="ind">
          {{ item }}
        </span>
      </el-form-item>
      <el-form-item label="反义词" v-if="wordData.fyc && wordData.fyc.length">
        <span v-for="(item, ind) in wordData.fyc" :key="ind">
          {{ item }}
        </span>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      word: "",
      wordData: {},
    };
  },
  methods: {
    searchWord() {
      const self = this;
      this.$request({
        url: {
          name: "getWord",
          params: {
            wd: this.word,
            key: "763a27b5587e9b5cf08a10ae1d3b8097",
          },
        },
        method: "GET",
      }).then((res) => {
        self.wordData = res.result;
      }).catch((error)=>{
        self.wordData = {}
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
